<script setup>
defineOptions({ name: 'collectItem' })
defineProps(['data'])
import 'vant/es/toast/style'
import { showSuccessToast } from 'vant'
import { updateCollection } from '@/api/collect.js'
const emit = defineEmits(['flush'])

const cancleCollect = async (id) => {
  const { status } = await updateCollection(id)
  status === 201 ? showSuccessToast('收藏成功') : showSuccessToast('取消收藏')
  emit('flush')
}
</script>

<template>
  <div class="px-3 my-3" v-if="Object.keys(data).length">
    <div
      class="d-flex align-items-center"
      @click="$router.replace(`/detail/${data.goods.id}`)"
    >
      <img
        :src="data.goods.cover_url"
        width="100"
        height="100"
        class="mx-3"
        alt=""
      />
      <div>
        <h6>{{ data.goods.title }}</h6>
        <span>{{ data.goods.description }}</span>
      </div>
    </div>
    <div class="d-flex justify-content-end align-items-center">
      <div
        @click="cancleCollect(data.goods.id)"
        class="d-flex flex-column justify-content-center align-items-center"
      >
        <van-icon name="star" size="20" color="orange" />
        <span>收藏</span>
      </div>
    </div>
    <hr />
  </div>
</template>

<style lang="scss" scoped></style>
